<template>
	<div class="content">
		<div class="content-header">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>系统管理</el-breadcrumb-item>
				<el-breadcrumb-item>
					<b>数据字典</b>
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="content-body">
			<el-scrollbar>
				<div class="panel">
					<el-form :model="dictionaryForm" ref="dictionaryForm" inline label-width="100px">
						<el-row>
							<el-col :md="8">
								<el-form-item label="编码">
									<el-select v-model="dictionaryForm.code" placeholder="全部" clearable>
										<el-option v-for="item in codeSelectList" :key="item.code" :label="item.name"
											:value="item.code">
										</el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :md="8">
								<el-form-item label="名称">
									<el-input v-model="dictionaryForm.name" maxlength="255"></el-input>
								</el-form-item>
							</el-col>
						</el-row>
						<div class="search-btn">
							<div class="search-btn-left">
								<el-button type="success" icon="el-icon-plus" @click="handleAdd">新增</el-button>
							</div>
							<div class="search-btn-right">
								<el-button type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>
								<el-button icon="el-icon-refresh" @click="resetForm">重置</el-button>
							</div>
						</div>
					</el-form>
					<el-table :data="tableData" border stripe style="width: 100%">
						<el-table-column label="序号" width="60" align="center">
							<template
								slot-scope="scope">{{scope.$index + 1 + (tableCurrentPage-1)*tablePageSize}}</template>
						</el-table-column>
						<el-table-column prop="code" label="编码" sortable></el-table-column>
						<el-table-column prop="name" label="名称" sortable></el-table-column>
						<el-table-column label="操作">
							<template slot-scope="scope">
								<el-button type="warning" @click="handleUpdate(scope.row.id)">编辑</el-button>
							</template>
						</el-table-column>
					</el-table>
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
						:current-page.sync="tableCurrentPage" :page-sizes="[10, 20, 30, 50]"
						:page-size.sync="tablePageSize" layout="total, jumper, prev, pager, next, sizes"
						:total="tableTotal"></el-pagination>
				</div>
			</el-scrollbar>
			<SysDictionary ref="sysDictionary"></SysDictionary>
		</div>
	</div>
</template>

<script>
	import SysDictionary from "./SysDictionary";
	export default {
		components: {
			SysDictionary
		},
		data() {
			return {
				dictionaryForm: {
					code: "",
					name: ""
				},
				tableTotal: 0,
				tableCurrentPage: 1,
				tablePageSize: 10,
				tableData: [],
				codeSelectList: []
			};
		},
		mounted() {
			// 获取代码编码下拉
			this.getCodeSelectList();
			this.getTableData(this.tableCurrentPage, this.tablePageSize);
		},
		methods: {
			handleSizeChange(val) {
				this.getTableData(this.tableCurrentPage, val);
			},
			handleCurrentChange(val) {
				this.getTableData(val, this.tablePageSize);
			},
			handleSearch() {
				this.getTableData(this.tableCurrentPage, this.tablePageSize);
			},
			getTableData(page, pageSize) {

				let pageParams = '?page=' + page + '&rows=' + pageSize;

				this.$api.post('/dictionary/findByPage' + pageParams, this.dictionaryForm).then(
					response => {
						this.tableData = response.data.list;
						this.tableTotal = response.data.total;
					}
				);
			},
			resetForm() {
				this.dictionaryForm.code = "";
				this.dictionaryForm.name = "";
				this.getTableData(1, this.tablePageSize);
			},
			handleAdd() {
				this.$refs.sysDictionary.initForm();
			},
			handleUpdate(id) {
				this.$refs.sysDictionary.initForm(id);
			},

			// 代码编码下拉
			getCodeSelectList() {
				this.$api.post('/dictionary/findAll').then(response => {
					this.codeSelectList = response.data;
				});
			}
		}
	};
</script>
